<template>
    <div class="person">
        <h3>3.reactive</h3>
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeAll">修改全部</button>
    </div>
</template>

<script lang="ts" setup name="Person"> 
    import {reactive,watch} from 'vue';
    let person = reactive({
        name: '真米酒',
        age: 19
    })
    function changeName(){
        person.name += '~';
    }
    function changeAge(){
        person.age += 1;
    }
    function changeAll(){
        Object.assign(person,{name:'江燕云',age:23});   //person的地址只没有发生变化
    }
    //默认开启深度监视。而且关不掉
    watch(person,(newValue,oldValue)=>{   //回调函数可以是一个参数
        console.log('person发生变化',newValue,oldValue);
    },{immediate: true})
</script>

<style>
    .person{
        background-color: rgb(251, 95, 121);
        border-radius: 10px;
        /* height: 150px; */
        width: 300px;
        box-shadow: 0 0 10px;
    }
</style>